<template>
	<view class="count">
		<view v-if="status" class="">
			<view class="topPing  b-r-25 b-f">
				<view class="markPoint">
					给我们打个分吧
				</view>
				<view class="f f-a-c f-j-c">
					<u-rate :count="count" active-color="#977961" inactive-color="#ebe2da" size="60"
						v-model="value"></u-rate>
				</view>
			</view>
			<view class="botImgUpload">
				<textarea v-model="textarea" name="" placeholder="来都来了就说说呗" class="text" id="" cols="30"
					rows="10"></textarea>
				<!-- 下面的上传图片 我的评价 -->
				<view class="pingText">
					<u-upload ref="uUpload" :show-progress="false" @on-remove="onRemove" upload-text="点击上传"
						max-count="9" :form-data="fromData" width="190" @on-success="succress"
						:before-upload="beforeUpload" height="190" :action="url"></u-upload>
				</view>
			</view>
			<view @click="pingjia" class="submitEvaluation">
				提交评价
			</view>
		</view>
		<view v-else class="">
			<view class="wu f f-a-c f-j-c f-d-c">
				<image src="/static/my/zanwuPing.png" class="zanwu" mode=""></image>
				<view class="pingName">
					评价成功
				</view>
				<view class="botBtn f f-a-c">
					<view @click="backShoop" class="backShoop">
						返回商城
					</view>
					<view @click="viewReviews" class="chaKan">
						查看评价
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: true,
				count: 5,
				value: 2,
				textarea: '',
				url: uni.getStorageSync('upload_domain'),
				token: uni.getStorageSync('upload_token'),
				fromData: {
					token: uni.getStorageSync('upload_token'),
					key: ''
				},
				page: 1,
				list: [],
				total: 0,
				myList: [],
				setel: [],
				num: 1,
				id: '',
				imgList: [],
				fileList: [],
				orderId: '',
				domain: uni.getStorageSync('domain'),
			}
		},
		onLoad(options) {
			this.id = options.id
			this.orderId = options.orderId
			this.fromData.key = this.genKey()
			uni.hideLoading()
		},
		methods: {
			// 返回商城
			backShoop() {
				uni.switchTab({
					url: '/pages/shoop/index'
				})
			},
			// 评价
			async pingjia() {
				let n = await this.$api.evaluationOrder({
					product_id: this.id,
					content: this.textarea,
					images: this.imgList.join(','),
					stars: this.value
				}, this.orderId)
				this.$msg(n.msg)
				if (n.code == 200) {
					setTimeout(() => {
						this.status = false
					})
				}
			},
			// 去我的评价
			viewReviews() {
				uni.navigateTo({
					url: `/pageB/MyAssessments?id=${this.id}&orderId=` + this.orderId
				})
			},
			onRemove(index, lists) {
				this.imgList = []
				lists.forEach(item => {
					this.imgList.push(this.domain + '/' + item.response.key)
				})
			},
			succress(data, index, lists, name) {
				uni.hideLoading()
				console.log(data, index, lists, name, '999999999');
				this.imgList.push(this.domain + '/' + data.key)
			},
			genKey() {
				uni.showLoading({
					title: "加载中"
				})
				let n = `img/${+new Date()+'/'+this.randomString()}.png`
				console.log(n);
				return n
			},
			beforeUpload(index, list) {
				console.log(index, list, '000');
				// this.imgList = list.filter(item => {
				// 	return this.domain + '/' + item.response.key
				// })
				this.fromData.key = this.genKey()
				console.log(this.fromData, '8888888');
				return true
			},
			randomString() {
				let str = 'ABCDEFGHIJKIMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
				let num = '';
				for (let i = 0; i < 16; i++) {
					num += str.charAt(Math.floor(Math.random() * str.length));
				}
				console.log(num, '000000000000');
				return num;
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-list-item {
		width: 160rpx !important;
		height: 160rpx !important;
	}

	.wu {
		margin-top: 20%;

		.zanwu {
			width: 162rpx;
			height: 160rpx;
		}

		.botBtn {
			.backShoop {
				width: 176rpx;
				height: 60rpx;
				line-height: 60rpx;
				border: 1rpx solid #977961;
				border-radius: 44rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: center;
				color: #977961;
				margin-right: 20rpx;
			}

			.chaKan {
				width: 176rpx;
				height: 60rpx;
				line-height: 60rpx;
				border: 1rpx solid #977961;
				border-radius: 44rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: center;
				color: #977961;
			}
		}

		.pingName {
			font-size: 36rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 600;
			text-align: CENTER;
			color: $hei;
			margin: 50rpx 0;
		}
	}

	/deep/ .u-star-wrap {
		margin-right: 20rpx !important;
	}

	.submitEvaluation {
		width: 90%;
		margin: 0 auto;
		height: 88rpx;
		line-height: 85rpx;
		background: #977961;
		border-radius: 44rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-500;
		font-weight: 500;
		text-align: center;
		color: #ffffff;
		margin-top: 60rpx;
	}

	.botImgUpload {
		width: 90%;
		margin: 0 auto;
		background: #fffefc;
		border-radius: 24rpx;
		padding: 30rpx;
		margin-top: 30rpx;
		color: #cbc2bb;

		.text {
			width: 100%;
			height: 250rpx;
			color: #2f2319;
		}
	}

	.pingText {
		width: 90%;
		// padding: 30rpx 20rpx;
		border-radius: 30rpx;
		background: #fffefc;
		// margin: 20rpx auto;

		.tu {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: LEFT;
			color: #666666;
			margin-bottom: 20rpx;
		}
	}

	.topPing {
		width: 90%;
		margin: 0 auto;
		padding: 40rpx 20rpx;

		.markPoint {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 400;
			text-align: CENTER;
			color: #ada6a0;
			margin-bottom: 10rpx;
		}
	}

	.count {
		padding: 30rpx 0;
		height: 100vh;
		width: 100%;
		background-color: #f7f6f2;
	}
</style>